/* 
使用context机制 跨层级组件通信
实现思路：
- 使用createContext方法创建一个上下文对象Ctx
- 在App组件通过Ctx.Provider组件提供数据
- 在子组件中通过useContext钩子函数获取数据

嵌套结构 App -> A -> B

*/

import { createContext, useContext, useState } from "react";

// 使用createContext方法创建上下文对象
const msgContext = createContext()

// A组件
const A = () => {

	return (
		<div>
			我是A组件
      <B/>
		</div>
    
	);
};

const B = () => {
  const [value , setValue] = useState('')
  const res = useContext(msgContext)
  console.log(res);
  

	return <div>我是B组件, 跨层传的值 {value} </div>;
};

function App() {

  const [name , setName] = useState('ts')
  const changeName = n => {
    setName(n)
  }
	return (
		<div className="app">
      {/* context包裹A组件 */}
      <msgContext.Provider value={name}>
        <A />  
      </msgContext.Provider>
      <button onClick={()=>changeName('hah')}>click {name} </button>
		</div>
	);
}

export default App;
